<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const tagType = ref(1)
const tagName = ref('')
const checkTagList = ref([])
const props = defineProps({
	tagVisible: Boolean
})
const tagVisible=ref(props.tagVisible)
// const tagChange=()=>{

// }
const emits = defineEmits(['tagCheck'])
const closeModel = () => {
	emits('tagCheck', false)
}
//标签搜索
const tagListChange = () => {
	if (tagName.value) {
		const alltagList = []

		// const
		tagList.value.forEach((tag) => {
			const tagList = []
			tag.tag_list.forEach((item) => {
				console.log(item.name.includes(tagName.value))
				if (item.name.includes(tagName.value)) {
					tagList.push(item)
					if (alltagList.length > 0) {
						alltagList.forEach((nowTag) => {
							if (nowTag.corp_id != tag.corp_id) {
								alltagList.push({ ...tag, tag_list: tagList })
							}
						})
					} else {
						alltagList.push({ ...tag, tag_list: tagList })
					}
				}
			})
		})
		serchList.value = alltagList
	} else {
		serchList.value = tagList.value
	}
}
const tagList = ref([
	{
		corp_id: '1745366562386370561',
		created_at: 1664793272,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11419,
		name: 'wwww',
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370561',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46075,
				name: 'wwwww',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370568',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46079,
				name: 'wwssss',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370563',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46077,
				name: '李四万',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			}
		],
		updated_at: 1664793272
	},
	{
		corp_id: '1745366562386370562',
		created_at: 1664793255,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11418,
		name: 'ssss',
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370561',
				created_at: 1664793255,
				creator_id: null,
				deleted: false,
				id: 46074,
				name: 'wdqdwedwd',
				order: 0,
				tag_group_id: 11418,
				updated_at: 1664793255,
				isCheck: false
			}
		],
		updated_at: 1664793255
	}
])
const serchList = ref([
	{
		corp_id: '1745366562386370561',
		created_at: 1664793272,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11419,
		name: 'wwww',
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370566',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46075,
				name: 'wwwww',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370568',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46079,
				name: 'wwssss',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			},
			{
				corp_id: '1745366562386370561',
				created_at: 1664793272,
				creator_id: null,
				deleted: false,
				id: 46077,
				name: '李四万',
				order: 0,
				tag_group_id: 11419,
				updated_at: 1664793272,
				isCheck: false
			}
		],
		updated_at: 1664793272
	},
	{
		corp_id: '1745366562386370562',
		created_at: 1664793255,
		creator_id: null,
		deleted: false,
		department_list: ['0'],
		id: 11418,
		name: 'ssss',
		order: 0,
		tag_list: [
			{
				corp_id: '1745366562386370561',
				created_at: 1664793255,
				creator_id: null,
				deleted: false,
				id: 46074,
				name: 'wdqdwedwd',
				order: 0,
				tag_group_id: 11418,
				updated_at: 1664793255,
				isCheck: false
			}
		],
		updated_at: 1664793255
	}
])
</script>
<template>
	<el-dialog class="customer-dialog" v-model="tagVisible" width="40%" @close="closeModel">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 style="text-align: center">选择标签</h4>
			</div>
		</template>
		<div class="dialog-content">
			<div class="dialog-header">
				<el-radio-group style="width: 100%" v-model="tagType">
					<el-radio-button :label="1">以下标签同时满足</el-radio-button>
					<el-radio-button :label="2">以下标签满足其中之一</el-radio-button>
				</el-radio-group>
			</div>
			<el-input v-model="tagName" @input="tagListChange" clearable placeholder="请输入群标签" :suffix-icon="Search" />
			<!-- 标签列表区域 -->
			<div class="tag-list" v-if="serchList.length > 0">
				<div v-for="item in serchList" :key="item.corp_id">
					<div class="tag-title">{{ item.name }} :</div>
					<div class="tag-list-item">
						<div
							@click="tag.isCheck = !tag.isCheck"
							v-for="tag in item.tag_list"
							:key="tag.id"
							:class="tag.isCheck ? 'tag-item-check' : 'tag-item'"
						>
							{{ tag.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="tag-list-null" v-else>
				<div class="tag-list-null-box">
					<img src="../../../../assets/img/img/ame-empty-image.png" alt="" />
					<p>未搜索到相关标签</p>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="footer-btn">
				<div>
					<el-button @click="closeModel">取消</el-button>
					<el-button type="primary" @click="closeModel">保存</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio-button) {
	width: 50%;
}
:deep(.el-radio-button__inner) {
	width: 100%;
}
a {
	color: #1890ff;
	text-decoration: none;
	cursor: pointer;
}
.gray {
	color: #595959;
	margin: 0 8px;
	font-size: 14px;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
.dialog-content {
	width: 100%;
	height: 450px;
	padding: 8px 6px 8px 18px;
	.dialog-header {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: -20px;
		margin-bottom: 20px;
		color: #1890ff;
	}
	.tag-list {
		width: 100%;
		max-height: 370px;
		margin-top: 20px;
		overflow-y: auto;
		.tag-title {
			color: #999;
			font-size: 13px;
			margin-bottom: 7px;
		}
		.tag-list-item {
			width: 100%;
			display: flex;
			.tag-item {
				background: #fafafa;
				border: 1px solid #d9d9d9;
				color: #595959;
			}
			.tag-item-check,
			.tag-item {
				min-width: 52px;
				padding: 0 11px;
				margin: 0 10px 20px 0;
				line-height: 26px;
				cursor: pointer;
				border-radius: 2px;
				font-size: 14px;
			}
			.tag-item-check {
				background-color: #e3f6ff;
				border: 1px solid #1890ff;
				color: #1890ff;
			}
			.tag-item:hover {
				background-color: #fff;
				border: 1px solid #1890ff;
				color: #1890ff;
			}
		}
	}
	.tag-list-null {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 370px;
		margin-top: 20px;
	}
	.tag-list-null-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		p {
			padding-top: 16px;
		}
	}
}
.footer-btn {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 6px;
}
</style>
